<script setup>
import { storeToRefs } from "pinia";
import { nextTick, onMounted, onBeforeUnmount, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import Dialog from "../component/dialog/index.vue";
import "../css/dialogConfirm.css";
import Modal from "../component/modal/modal.vue";
import doublePage from "../public/assets/pointReading/doublePage.png";
import magnifyImg from "../public/assets/pointReading/magnify.png";
import pause2 from "../public/assets/pointReading/pause2.png";
import pictureSwitchHideImg from "../public/assets/pointReading/pictureSwitchHide.png";
import pictureSwitchShowImg from "../public/assets/pointReading/pictureSwitchShow.png";
import play2 from "../public/assets/pointReading/play2.png";
import reduceImg from "../public/assets/pointReading/reduce.png";
import singlePage from "../public/assets/pointReading/singlePage.png";
import bookStore from "../store/modules/book.js";
import { getCatalog, getPage, getReading } from "../api/pointReading.js";
import Grade from "../utils/grade.js";
const router = useRouter();
const route = useRoute();

const { currentIndex, toggle } = storeToRefs(bookStore());

const path = window.gradeId > 61 ? "middle" : "primary";
const urlDlog = new URL(`../public/assets/expression/${path}/dlog_img.png`, import.meta.url).href;
// const gradeId = ref(localStorage.getItem("gradeId"));
// const gradeType = ref(localStorage.getItem("gradeType"));

const gradeId = ref(window.gradeId);
const gradeType = ref(gradeId.value > 61 ? "middle" : "primary");

const startPage = ref(Number(localStorage.getItem("startPage")));
const data = ref([]);
const slides = ref(toggle);
const polygon = ref(true);
const translation = ref();
const toggleMagnify = ref(false);
const figcaptionMode = ref();
const style = ref({
	container: {
		width: 0,
		scale: 1,
	},
});
const imgLoading = ref(true);
const sideOpen = ref(false);
const catalogData = ref();
const catalogCheckedValue = ref(gradeType.value === "primary" ? 2 + startPage.value : 1 + startPage.value);
const paused = ref(true);
const ended = ref(true);
const readModel = ref("point");
const confirmOpen = ref(false);
const repetitionText = ref("1.选择一个方框作为复读起始句");
const promptShow = ref(false);
const promptText = ref("进入连读模式");
let swiper,
	ratio = 0,
	pageWidth = 0;
let audio, selector, playList;
async function init({ detail }) {
	const [ins] = detail;
	swiper = ins;
	resetAudio();
	data.value = new Array((await getPage(0, gradeId.value)).total).fill(null);
	currentIndex.value ? swiper.slideTo(currentIndex.value) : onSliderChange();
}
async function load({ target }) {
	pageWidth = target.width;
	ratio = target.naturalWidth / target.naturalHeight;
	style.value.container.width = target.width * slides.value;
	target.style.width = "100%";
	imgLoading.value = false;
}
async function fetchData(index) {
	if (!data.value[index]) {
		const [{ url, coordinate, width, height }, list] = await Promise.all([getPage(index, gradeId.value), getReading(gradeId.value, Math.floor(index / 2))]);
		coordinate.forEach(i => {
			i.id = list.find(({ content_id }) => i.audio === content_id)?.id;
			i.points = i.points.map(({ x, y }) => `${x},${y}`).join(" ");
		});
		data.value[index] = { url, coordinate, height, width };
		//		console.log("fetchData",data.value[index]);
		return list;
	}
	return null;
}
function left() {
	if (!playList) {
		resetAudio();
		swiper.slidePrev();
		if (swiper.activeIndex === 0) {
			promptText.value = "已经是第一页";
			promptAppear();
		}
	}
	if(toggleMagnify.value){
		swiper.slides[swiper.activeIndex].querySelector("img").style.width = "100.3%";
	}
	currentIndex.value = swiper.activeIndex;
}
function right() {
	if (!playList) {
		resetAudio();
		swiper.slideNext();
		if (slides.value === 1) {
			if (swiper.activeIndex === data.value.length - 1) {
				promptText.value = "已经是最后一页";
				promptAppear();
			}
		} else {
			if (swiper.activeIndex === data.value.length - 2) {
				promptText.value = "已经是最后一页";
				promptAppear();
			}
		}
	}
	if(toggleMagnify.value){
		swiper.slides[swiper.activeIndex].querySelector("img").style.width = "100.3%";
	}
	currentIndex.value = swiper.activeIndex;
}
function pointRead({ target }) {
	switch (figcaptionMode.value) {
		case "selector":
			selector.get(target);
			break;
		case "controls":
			playList.update(Number(target.dataset.id));
			break;
		default:
			resetAudio();
			audio.el = target;
			audio.src = target.dataset.src;
			const el = document.querySelectorAll(`[data-id="${target.dataset.id}"]`);
			if (el.length > 1) {
				el.forEach(i => {
					i.setAttribute("fill", "rgba(24,159,90,0.2)");
					if (i.dataset.translation) {
						//						translation.value[i.dataset.index].style.visibility = "visible";
					}
				});
				audio.onended = () =>
					el.forEach(i => {
						i.setAttribute("fill", "transparent");
						translation.value[i.dataset.index].style.visibility = "hidden";
					});
			} else {
				target.setAttribute("fill", "rgba(24,159,90,0.2)");
				if (target.dataset.translation) {
					//					translation.value[target.dataset.index].style.visibility = "visible";
				}
				audio.onended = () => {
					target.setAttribute("fill", "transparent");
					translation.value[target.dataset.index].style.visibility = "hidden";
				};
			}
			audio.play();
			break;
	}
}
function catalogList() {
	sideOpen.value = true;
	if (readModel.value === "point") {
		resetAudio();
	}
}
async function successive() {
	resetAudio();
	if (slides.value === 1) {
		if (!data.value[swiper.activeIndex]?.coordinate?.length) {
			promptText.value = "该页没有音频内容";
			promptAppear();
			return;
		}
	} else {
		if (!data.value[swiper.activeIndex]?.coordinate?.length && !data.value[swiper.activeIndex + 1]?.coordinate?.length) {
			promptText.value = "该页没有音频内容";
			promptAppear();
			return;
		}
	}
	promptText.value = "进入连读模式";
	promptAppear();
	requestAnimationFrame(async () => {
		for (let index = swiper.activeIndex; index < data.value.length; index++) {
			await fetchData(index);
		}
	});
	let startId,
		endId = data.value.at(-1) ? Number(querySlidesSelectorAll().at(-1).dataset.id) : null;
	for (let index = swiper.activeIndex; !startId; index++) {
		startId = Number(querySlidesSelector({ index })[0]?.dataset?.id);
	}
	for (let index = data.value.length - 1; !endId; index--) {
		endId = (await fetchData(index))?.at(-1)?.id;
	}
	playList = new PlayList(startId, endId, true);
	figcaptionMode.value = "controls";
	playList.play();
}
function stopSuccessive() {
	resetAudio();
	playList = null;
	figcaptionMode.value = "";
	promptText.value = "进入点读模式";
	promptAppear();
	repetitionText.value = "1.选择一个方框作为复读起始句";
}
function repetition() {
	resetAudio();
	promptText.value = "进入复读模式";
	promptAppear();
	selector = new RangeSelector();
	figcaptionMode.value = "selector";
}
function reading() {
	router.push({
		name: "readingEvaluation",
	});
	currentIndex.value = swiper.activeIndex;
}
function exitRepetition() {
	resetAudio();
	promptText.value = "进入点读模式";
	promptAppear();
	playList = null;
	figcaptionMode.value = "";
	selector?.start?.setAttribute("fill", "transparent");
	repetitionText.value = "1.选择一个方框作为复读起始句";
}
function toggleSlider() {
	const { activeIndex } = swiper;
	slides.value = slides.value === 1 ? 2 : 1;
	style.value.container.width = pageWidth * slides.value;
	for (let index = currentIndex.value; index < currentIndex.value + slides.value; index++) {
		fetchData(index);
	}
	nextTick(() => {
		resetAudio();
		swiper.slideTo(activeIndex);
		onresize();
	});
}
function scale() {
	document.querySelector("main").scrollTop = 0;
	const ratio = innerWidth > innerHeight ? innerWidth / innerHeight : innerHeight / innerWidth;
	if (ratio > 1.8) {
		style.value.container.scale = style.value.container.scale === 1 ? 1.2 : 1;
		toggleMagnify.value = style.value.container.scale === 1.2;
	} else {
		style.value.container.scale = style.value.container.scale === 1 ? 1.1 : 1;
		toggleMagnify.value = style.value.container.scale === 1.1;
	}
	if (toggleMagnify.value) {
		document.querySelector("main").style.overflow = "auto";
		document.querySelector(".root .swiper").style.height = "99%";
		swiper.slides[swiper.activeIndex].querySelector("img").style.width = "100.3%";
	} else {
		document.querySelector("main").style.overflow = "hidden";
		document.querySelector(".root .swiper").style.height = "100%";
		swiper.slides[swiper.activeIndex].querySelector("img").style.width = "100%";
	}
	resetAudio();
}
function promptAppear() {
	if (promptText.value === "该页没有音频内容") {
		document.querySelector(".tips").style.left = "45%";
		document.querySelector(".tips").style.right = "45%";
	} else {
		document.querySelector(".tips").style.left = "46%";
		document.querySelector(".tips").style.right = "46%";
	}
	promptShow.value = true;
	setTimeout(() => {
		promptShow.value = false;
	}, 1000);
}
function menu(i) {
	if (Number(slides.value) === 1) {
		if (gradeId.value === 81) {
			swiper.slideTo(i - startPage.value);
		} else if (gradeId.value === 71) {
			swiper.slideTo(i - 1 - startPage.value);
		} else {
			swiper.slideTo(i - 2 - startPage.value);
		}
	} else {
		if (gradeId.value === 81) {
			swiper.slideTo(i % 2 === 0 ? i - 1 - startPage.value : i - startPage.value);
		} else if (gradeId.value === 71) {
			swiper.slideTo(i % 2 === 0 ? i - 1 - startPage.value : i - startPage.value);
		} else {
			swiper.slideTo(i % 2 === 0 ? i - 2 - startPage.value : i - 3 - startPage.value);
		}
	}
	sideOpen.value = false;
	catalogCheckedValue.value = i;
}
function back() {
	confirmOpen.value = false;
	resetAudio();
	exit();
}
function exit() {
	router.go(-1);
	resetAudio();
}
const buttonBackColor = () => {
	if (path === "middle") {
		return "#FFA53E";
	} else {
		return "linear-gradient(to bottom, #FFC55E, #ED9900)";
	}
};
const buttonAginColor = () => {
	if (path === "middle") {
		return "#1E4BA6";
	} else {
		return "linear-gradient(to bottom, #85D389, #61BD66)";
	}
};
function onSliderChange() {
	currentIndex.value = swiper.activeIndex;
	for (let index = currentIndex.value; index < currentIndex.value + slides.value; index++) {
		fetchData(index);
	}
	if(toggleMagnify.value){
		swiper.slides[swiper.activeIndex].querySelector("img").style.width = "100.3%";
	}
	resetAudio();
}
function querySlidesSelectorAll() {
	return swiper.slides.flatMap(el => Array.from(el.querySelectorAll("polygon"))).sort((a, b) => Number(a.dataset.id) - Number(b.dataset.id));
}
function querySlidesSelector(data) {
	return querySlidesSelectorAll().filter(({ dataset }) => Object.getOwnPropertyNames(data).every(name => dataset[name] === `${data[name]}`));
}
function resetAudio() {
	paused.value = true;
	ended.value = true;
	if (audio?.pause) {
		audio.pause();
	}
	if (audio?.onended) {
		audio.onended();
	}
	if (audio?.el) {
		audio.el.setAttribute("fill", "transparent");
		audio.el = null;
	}
	audio = new Audio();
	audio.addEventListener("play", () => {
		paused.value = audio.paused;
		ended.value = audio.ended;
	});
	audio.addEventListener("pause", () => {
		paused.value = audio.paused;
		ended.value = audio.ended;
	});
	audio.addEventListener("ended", () => {
		paused.value = audio.paused;
		ended.value = audio.ended;
	});
}
class PlayList {
	constructor(start = 0, end = Number.MAX_SAFE_INTEGER, sequence) {
		this.start = start < end ? start : end;
		this.index = this.start;
		this.end = start > end ? start : end;
		this.sequence = sequence;
	}
	play() {
		const target = querySlidesSelector({ id: this.index });
		if (Number(target[0]?.dataset?.index) !== swiper.activeIndex) {
			swiper.slideTo(Number(target[0]?.dataset?.index));
		}
		audio.el = target[0];
		audio.src = target[0]?.dataset?.src;
		target.forEach(i => {
			i.setAttribute("fill", "rgba(24,159,90,0.2)");
			if (i.dataset.translation) {
				//				translation.value[i.dataset.index].style.visibility = "visible";
			}
		});
		audio.onended = e => {
			target.forEach(i => {
				i.setAttribute("fill", "transparent");
				translation.value[i.dataset.index].style.visibility = "hidden";
			});
			if (e) {
				if (this.index === this.end) {
					this.index = this.start;
					this.sequence ? stopSuccessive() : this.play();
				} else {
					this.index += 1;
					this.play();
				}
			}
		};
		audio.play();
	}
	update(index = this.index) {
		if (index >= this.start && index <= this.end) {
			resetAudio();
			this.index = index;
			this.play();
		}
	}
}
class RangeSelector {
	constructor() {
		this.start = null;
		this.end = null;
	}
	get(target) {
		if (!this.start) {
			this.start = target;
			target.setAttribute("fill", "rgba(24,159,90,0.2)");
			repetitionText.value = "2.选择一个方框作为复读结束句";
			return;
		}
		if (!this.end) {
			this.end = target;
			target.setAttribute("fill", "rgba(24,159,90,0.2)");
			playList = new PlayList(Number(this.start.dataset.id), Number(this.end.dataset.id));
			figcaptionMode.value = "controls";
			setTimeout(() => {
				this.start.setAttribute("fill", "transparent");
				this.end.setAttribute("fill", "transparent");
				playList.play();
			}, 500);
		}
	}
}
onMounted(async () => {
	console.log("gradeIds",typeof gradeId.value)
	document.body.style.overflow = "hidden";
	document.querySelector("main").style.overflow = "hidden";
	catalogData.value = await getCatalog(gradeId.value);
	onresize = () => {
		if (!imgLoading.value) {
			const img = swiper.slides[swiper.activeIndex].querySelector("img");
			style.value.container.width = img.height * ratio * slides.value;
		}
	};
});
onBeforeUnmount(() => {
	document.body.style.overflow = "unset";
	document.querySelector("main").style.overflow = "unset";
	onresize = null;
});
</script>
<template>
	<figure class="root">
		<img alt="" class="back" src="../public/assets/home/home_back.png" @click="back" />
		<main>
			<article>
				<img alt="" :class="{ leftTranslate1: toggleMagnify && style.container.scale === 1.1, leftTranslate2: toggleMagnify && style.container.scale === 1.2, leftTranslate3: toggleMagnify && style.container.scale === 1.3 }" class="left" src="../public/assets/pointReading/arrow_left2.png" @click="left" />
				<swiper-container :simulateTouch="false" :slides-per-group="slides" :slides-per-view="slides" class="swiper" @swiperslidechange="onSliderChange" @swiperinit="init">
					<swiper-slide v-for="(item, index) of data" :key="index" class="slide" @click.stop="">
						<img :src="item?.url" alt="" draggable="false" @load="load" />
						<svg :viewBox="`0 0 ${item?.width || 0} ${item?.height || 0}`">
							<polygon v-for="coordinate of item?.coordinate" :data-id="coordinate.id" :data-index="index" :data-src="coordinate.audio_url" :data-translation="coordinate.translation" :points="coordinate.points" :stroke="polygon ? '#dd772d' : 'transparent'" fill="transparent" stroke-width="0.2%" @click="pointRead"></polygon>
						</svg>
						<div ref="translation" :class="{ translationBottom1: toggleMagnify && style.container.scale === 1.1, translationBottom2: toggleMagnify && style.container.scale === 1.2, translationBottom3: toggleMagnify && style.container.scale === 1.3 }" class="translation">
							<p v-html="audio?.el?.dataset?.translation"></p>
						</div>
					</swiper-slide>
				</swiper-container>
				<img alt="" :class="{ rightTranslate1: toggleMagnify && style.container.scale === 1.1, rightTranslate2: toggleMagnify && style.container.scale === 1.2, rightTranslate3: toggleMagnify && style.container.scale === 1.3 }" class="right" src="../public/assets/pointReading/arrow_right2.png" @click="right" />
			</article>
		</main>
		<figcaption>
			<ul v-show="!figcaptionMode">
				<li @click="catalogList">
					<img alt="" class="icon" src="../public/assets/pointReading/directory3.png" />
					<div class="font2">目录</div>
				</li>
				<li @click="successive">
					<img alt="" class="icon" src="../public/assets/pointReading/continuous.png" />
					<div class="font2">连读</div>
				</li>
				<li @click="repetition">
					<img alt="" class="icon" src="../public/assets/pointReading/repetition.png" />
					<div class="font2">复读</div>
				</li>
				<li v-show="false" @click="reading">
					<img alt="" class="icon" src="../public/assets/pointReading/follow_along_review2.png" />
					<div class="font2">评测</div>
				</li>
				<li @click="toggleSlider">
					<img :src="slides === 1 ? doublePage : singlePage" alt="" class="icon" />
					<div class="font2">{{ slides === 1 ? "切换双页" : "切换单页" }}</div>
				</li>
				<li @click="scale">
					<img :src="style.container.scale === 1 ? magnifyImg : reduceImg" alt="" class="icon" />
					<div class="font2">{{ style.container.scale === 1 ? "放大" : "缩小" }}</div>
				</li>
				<li v-show="false" @click="polygon = !polygon">
					<img :src="polygon ? pictureSwitchShowImg : pictureSwitchHideImg" alt="" class="icon" />
					<div class="font2">点读框</div>
				</li>
			</ul>
			<ul v-show="figcaptionMode === 'controls'" style="width: 850px; justify-content: space-around; margin: 0 auto; padding: 0.25% 1% 0">
				<li @click="stopSuccessive">
					<img alt="" src="../public/assets/pointReading/stop2.png" />
					<div class="font2">停止</div>
				</li>
				<li @click="audio.paused ? audio.play() : audio.pause()">
					<img :src="paused ? play2 : pause2" alt="" />
					<div class="font2">{{ paused ? "播放" : "暂停" }}</div>
				</li>
			</ul>
			<ul v-show="figcaptionMode === 'selector'" style="width: 700px; margin: 0 auto; display: block; position: relative">
				<li style="display: flex; width: min-content; height: min-content; padding: 0px; position: absolute; top: 50%; left: 10%; transform: translate(0px, -50%); flex-direction: column; width: 100%; justify-content: center; align-items: start; font-size: 16px">
					<!--					<div style="margin: 0;">-->
					<p class="font2" style="white-space: break-spaces; margin: 0 0 2%">{{ repetitionText }}</p>
					<p class="font2" style="color: #999; white-space: break-spaces; margin: 0">（单句复读，起始和结束请选择同样的方框）</p>
					<!--					</div>-->
				</li>
				<li class="exit" style="position: absolute; top: 50%; right: 9.7%; transform: translate(0, -52%)" @click="exitRepetition">
					<div>
						<img alt="" src="../public/assets/pointReading/exit.png" style="margin-bottom: 10%; height: 40px" />
						<span class="font2">退出复读</span>
					</div>
				</li>
			</ul>
		</figcaption>
		<div v-show="promptShow" class="tips">
			{{ promptText }}
		</div>
	</figure>
	<modal dialogClose :open="sideOpen" dialog-position="left" catalog-title @close="sideOpen = false">
		<!--		<template #title>{{ catalogData.title }}</template>-->
		<template #content>
			<h4 style="text-align: center; margin: 4% 0">{{ catalogData.title }}</h4>
			<nav style="width: 100%">
				<div v-for="(item, index) in catalogData.data" :key="index" :class="{ selectedMenu: catalogCheckedValue === item.page, unselectedMenu: catalogCheckedValue !== item.page }" class="menu" @click="menu(item.page)">
					<span :data-key="item.page" :class="{ textEn1: Number(gradeId) === 71 || Number(gradeId) === 81, textEn2: Number(gradeId) === 31 || Number(gradeId) === 41 || Number(gradeId) === 51 || Number(gradeId) === 61 }" style="width: 80%" v-html="item.name"></span>
					<span>第{{ item.page }}页</span>
					<!--					<div id="arrow"></div>-->
				</div>
			</nav>
		</template>
	</modal>
	<Dialog :open="confirmOpen">
		<div class="dialog-wrap-confirm">
			<div class="confirm-content">
				<img alt="" :src="urlDlog" />
				<span>今天的学习还没有完成, 你真的要退出吗？</span>
				<div class="control">
					<button @click="exit" class="button btn-back" :style="{ background: buttonBackColor() }">确认退出</button>
					<button @click="confirmOpen = false" class="button btn-agin" :style="{ background: buttonAginColor() }">继续学习</button>
				</div>
			</div>
		</div>
	</Dialog>
	<div v-show="imgLoading" class="loading">加载中...</div>
</template>
<style scoped>
@font-face {
	font-family: "text-cn";
	src: url("../public/assets/fonts/方正楷体_GBK.TTF");
}
@font-face {
	font-family: "text-en1";
	/* src: url("../fonts/ABeeZee-Regular.ttf"); */
	src: url("../public/assets/fonts/Times New Roman.ttf");
}
@font-face {
	font-family: "text-en2";
	src: url("../public/assets/fonts/ABeeZee-Regular.ttf");
	/* src: url("../fonts/Comic Sans MS.ttf"); */
}
.root {
	height: 100%;
	margin: 0;
	background: url("../public/assets/pointReading/pointBg.png");
	background-size: 100% 100%;
	font-family: "text-cn", serif;
}
.root .back {
	cursor: pointer;
	width: 50px;
	height: 50px;
	left: 5%;
	position: absolute;
	top: 5%;
	z-index: 2;
}
.root main {
	height: calc(100% - 75px);
	overflow: auto;
	position: relative;
}
.root article {
	height: 100%;
	left: 50%;
	overflow: hidden;
	position: absolute;
	top: 0;
	transform-origin: top;
	transform: translate(-50%, 0) scale(v-bind("style.container.scale"));
	white-space: nowrap;
}
.root article > img {
	cursor: pointer;
	transform: translate(0, -190%) scale(1);
	width: 48px;
}
.root .swiper {
	display: inline-block;
	height: 100%;
	margin: 0 48px 0 55px;
	width: v-bind("style.container.width+'px'");
}
.root li img {
	height: 40px;
	transform: scale(1);
	transition: all 100ms;
	margin-bottom: 7%;
}
.root .swiper img {
	height: 100%;
}
.root .swiper svg {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.root figcaption {
	width: 100%;
	height: 75px;
	background: #fff;
	border-top-left-radius: 1.2rem;
	border-top-right-radius: 1.2rem;
	position: fixed;
	box-shadow: 0 -0.5rem 1rem 0 rgba(25, 18, 16, 0.2);
	z-index: 10;
}
.root ul {
	box-sizing: border-box;
	column-gap: 5%;
	display: flex;
	height: 100%;
	justify-content: center;
	margin: 0;
	padding-top: 0.3%;
}
.root li {
	cursor: pointer;
	list-style: none;
	text-align: center;
	color: #333;
	font-size: 16px;
}
.root li:hover img {
	transform: scale(1.05);
}
.root article .leftTranslate1,
.root article .rightTranslate1 {
	transform: translate(0, -340%);
}
.root article .leftTranslate2,
.root article .rightTranslate2 {
	transform: translate(0, -470%);
}
.root article .leftTranslate3,
.root article .rightTranslate3 {
	transform: translate(0, -590%);
}
.dialog-wrap-confirm {
	font-family: "text-cn", serif;
}
.tips {
	background-color: rgb(0 0 0 / 50%);
	color: white;
	height: 2rem;
	left: 46%;
	line-height: 2rem;
	position: absolute;
	right: 46%;
	text-align: center;
	top: 50%;
	transform: translate(0, -50%);
	font-size: 0.8rem;
	border-radius: 0.1rem;
}
.translation {
	background-color: rgb(0 0 0 / 50%);
	bottom: 0;
	color: white;
	display: flex;
	height: max-content;
	justify-content: center;
	padding: 1%;
	position: absolute;
	visibility: hidden;
	width: 100%;
}
.translationBottom1 {
	bottom: 9%;
}
.translationBottom2 {
	bottom: 17%;
}
.translationBottom3 {
	bottom: 23%;
}
.translation p {
	margin: 0;
	padding-right: 2%;
	text-align: justify;
	white-space: break-spaces;
}
.exit {
	color: #f98898;
	cursor: default;
	display: flex;
	white-space: nowrap;
	flex-direction: column;
	justify-content: end;
	align-items: end;
}
.exit div {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.menu {
	align-items: center;
	border-bottom: 1px solid #e7e7e7;
	color: #333;
	cursor: pointer;
	display: flex;
	font-size: 0.8rem;
	justify-content: space-between;
	margin: 2% 4%;
	padding-bottom: 3%;
	text-align: left;
}
.menu:first-child {
	margin-top: 0;
}
.menu:hover {
	color: #35c79c;
}
.menu #arrow {
	background: url("../public/assets/pointReading/catalog_dialog_arrow.png");
	background-size: 100% 100%;
	height: 1rem;
	width: 1rem;
}
.menu:hover #arrow {
	background: url("../public/assets/pointReading/catalog_dialog_arrow_selected.png");
	background-size: 100% 100%;
	height: 1rem;
	width: 1rem;
}
.confirm-content {
	height: unset;
}
.selectedMenu {
	color: #35c79c;
}
.unselectedMenu {
	color: #333;
}
.loading {
	align-items: center;
	background: rgb(0 0 0 / 30%);
	color: #fff;
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	line-height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 999;
}
#modelPromptBox {
	bottom: 60%;
	position: relative;
	text-align: center;
	z-index: 2;
}
#modelPromptBox p {
	background: rgb(0 0 0 / 40%);
	border-radius: 0.3rem;
	color: #fff;
	margin: 0 auto;
	padding: 0.5%;
}
.textEn1 {
	font-family: text-en1, serif;
}
.textEn2 {
	font-family: text-en2, serif;
}
.font2 {
	font-family: "FZLTZHUNHK-GBK1", serif;
}
.shadow {
	z-index: 99999;
}
::-webkit-scrollbar {
	width: 0.5rem;
	height: 0.5rem;
}
::-webkit-scrollbar-thumb {
	background-color: #00b1a5;
	border-radius: 0.5rem;
}
::-webkit-scrollbar-track {
	background-color: #eee;
	border-radius: 0.5rem;
}
</style>
